*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.left{float: left}
/*@keyframes donghua1 {
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg); }
}

.box1{
    width: 200px;
    height: 250px;
    background-color: cadetblue;
    position: fixed;
    top: 50%;
    left: 50%;
    /!*transform: translate(50%,50%);*!/
    animation-name: donghua1;
    animation-duration: 3s ;
}*/

@keyframes dengdai {
    from{transform:scale(1);}
    to{transform:scale(0); }
}




.loading{
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%) ;
}
.loading>.yuan{
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color:midnightblue;
    margin: 0 10px;
    animation-name: dengdai;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.y2{animation-delay: 0.33333333s;}
.y3{animation-delay: 0.66666666s;}





@keyframes dengdai2 {
    from{transform:scaley(1);}
    to{transform:scaley(0); }
}

.loading2{
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.chang{
    width: 6px;
    height: 40px;
    background-color: darkgreen;
    margin: 0 2px;
    animation-name: dengdai2;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.c2{animation-delay: 0.1s;}
.c3{animation-delay: 0.18s;}
.c4{animation-delay: 0.26s;}
.c5{animation-delay: 0.34s;}
.c6{animation-delay: 0.42s;}
.c7{animation-delay: 0.5s;}
.c8{animation-delay: 0.58s;}
.c9{animation-delay: 0.66s;}
.c10{animation-delay: 0.74s;}



@keyframes dengdai27 {
    50%{transform:rotate(180deg);}
    100%{transform:rotate(0deg); }
}
.loading27{
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%) ;
}
.loading27>.yuan{
    border: 5px solid sandybrown;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation-name: dengdai27;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 2.5s;
}
.n1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation-delay: 0.3s;

}

.n2{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 5px solid sandybrown;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation-delay: 0.2s;
    position: absolute;
    top: 10%;
    left: 10%;
}

.n3{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 5px solid sandybrown;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation-delay: 0.1s;
    position: absolute;
    top: 20%;
    left: 20%;
}

.n4{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid sandybrown;
    border-top-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 30%;
    left: 30%;
    animation-delay: 0s;

}







